<template>
    <div id="app" class="dialogue-wrap">
        <scroll-fixed ref="fixedbar">
            <page-bar>
                <a slot='left' href="javascript:void(0);" @click="leftHandle">
                    <i class="uicon uicon-back"></i>
                </a>
                <div slot="middle" class="header-tabs">
                    <a href="javascript:;" class="on">动态</a>
                    <a @click="go('my_issue')" href="javascript:;">评论</a>
                    <a @click="go('reply_my')" href="javascript:;">回复我的</a>
                </div>
                <div slot="right"></div>
            </page-bar>
        </scroll-fixed>
        <scroll-list v-if="list.length" :disabled="true" :config="scroll" @bottom="loadmore">
            <transition-group class="index-list" name="list">
                <square-item 
                    v-for="(item,index) in list" 
                    @delete="delItem(index)"
                    @item-share="share(item)" 
                    :item="item" 
                    :key="item.id"/>
            </transition-group>
        </scroll-list>
        <div v-else class="no-comment">
            <div class="no-con">
                <img src="../assets/no-comment.png" alt="">
                <div class="no-tip">暂无动态</div>
            </div>
        </div>

        <popup-more :status="moreConfig.status" :config="moreConfig" @close="moreConfig.status = false"></popup-more>
    </div>
</template>
<script>
    import pageBar from "../components/pagebar.vue";
    import scrollFixed from "../components/scrollFixed.vue";
    import ScrollList from "../components/scrollList.vue";
    import report from '../components/report.vue';
    import MoreBox from '@/components/morebox.vue'

    import SquareItem from '@/square/components/items.vue';
    import _ from "lodash";
    import Lazy from '@/plugins/lazy.js'

    export default {
        name: "reply_my",
        components: {
            [SquareItem.name]: SquareItem,
            [MoreBox.name]: MoreBox,
            [pageBar.name]: pageBar,
            [ScrollList.name]: ScrollList,
            [scrollFixed.name]: scrollFixed
        },
        data() {
            return {
                lazy:new Lazy(),
                scroll: {
                    bottom: false
                },
                list: [],
                page: {
                    page_no: 1,
                    page_size: 10,
                    isEnd: false,
                },
                moreConfig:{
                    id:'',
                    status:false,
                    fav:false,
                    night:false,
                    font:false,
                    range:3,
                    hideOption:true,
                    email_title:'泛亚资讯 动态详情',
                    email_content:'xxxxxx'
                },
            };
        },
        mounted() {
            this.getList().then(()=>{
                    this.$nextTick(() => {
                        this.scroll.bottom = this.list.length == 0 ? 'hidden' : (this.page.isEnd ? 'done' : false);
                    });
                })
        },
        methods: {
            getList() {
                return this.$http.get('?ct=member_publish&ac=my_dynamic&page_no=' + this.page.page_no + '&page_size=' + this.page.page_size)
                    .then(response => {
                        let { data } = response;
                        if (data.code == 0) {
                            let res = data.data;
                            this.page.isEnd = !res.is_have_data;
                            this.list = this.list.concat(res.list);
                            this.page.page_no++;
                            this.$nextTick(()=>{
                                this.lazy.update();
                            });
                        }else{
                            this.$toast(data.msg);
                        }
                    }).catch(e=>{
                        this.$toast('获取数据失败');
                    })
            },
            loadmore() {
                if (this.scroll.bottom || this.page.isEnd) return false;
                this.scroll.bottom = true;
                this.getList().then(()=>{
                    this.$nextTick(() => {
                        this.scroll.bottom = this.page.isEnd ? 'done' : false;
                    });
                })
            },
            go(path) {
                location.href = this.$config.pages[path];
            },
            leftHandle(){
                if(this.$utils.app.isApp){
                    location.href = this.$utils.app.link.back;
                }else{
                    if(document.referrer == ''){
                        location.href = this.$config.pages.home
                    }else{
                        location.href = this.$config.pages.myCenter;
                    }
                    this.$emit('left')
                }
            },
            delItem(index){
                this.list.splice(index,1);
            },
            share(){
                this.moreConfig.status = true;
            },
        }
    };
</script>
<style lang="less">
    .dialogue-wrap {
        .header-tabs {
            display: flex;
            height: 82px;
            font-size: 30px;

            a {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                color: #919191;
                &+a {
                    margin-left: 80px;
                }
                &.on {
                    font-weight: bold;
                    color: #333;
                }
                &.on::before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;
                    width: 46px;
                    height: 6px;
                    background-color: #e64a19;
                    border-radius: 3px;
                }
            }
        }

        .comment-end {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 106px;
            color: #c6c6c6;
            font-size: 28px;
        }

         .no-comment {
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background: #fff;

            .no-con {
                text-align: center;
            }

            img {
                width: 102px;
                height: 108px;
                margin-bottom: 49px;
            }

            .no-tip {
                font-size: 34px;
                color: #c6c6c6;
            }
        }
    }
</style>